<template>
    <view class="u-wrap">
        <view class="u-menu-wrap">
            <u-divider margin-top="30" color="#000" fontSize="32" bg-color="#fafafa" margin-bottom="40">产区</u-divider>
            <u-grid :col="3">
                <u-grid-item v-for="item in areaList" :key="item.id" @click="toPorductArea(item.id)">
                    <u-image width="70rpx" height="46rpx" :src="item.area_image" >
                        <u-loading slot="loading"></u-loading>
                        <view slot="error" style="font-size: 24rpx;">加载失败</view>
                    </u-image>
                    <view class="grid-text">{{ item.area_name }}</view>
                </u-grid-item>
            </u-grid>
        </view>
        <view class="u-menu-wrap">
            <u-divider margin-top="30" color="#000" fontSize="32" bg-color="#fafafa" margin-bottom="40">分类</u-divider>
            <u-grid :col="3">
                <u-grid-item v-for="item in cateList" :key="item.id" @click="toPorductCate(item.id)">
                    <view class="grid-text">{{ item.cate_name }}</view>
                </u-grid-item>
            </u-grid>
            <u-gap height="20" bg-color="#fafafa"></u-gap>
        </view>
        <u-divider @click="toProductAll" margin-top="30" color="#000" bg-color="#fafafa" fontSize="32" margin-bottom="40">查看全部</u-divider>
    </view>
</template>
<script>
export default {
    data() {
        return {
            areaList: [],
            cateList: []
        };
    },
    onLoad() {},
    onReady() {},
    mounted() {
        this.$u.api.getProductArea().then(r => {
            this.areaList = r.list;
        });
        this.$u.api.getProductCate({ cate_parent: 0 }).then(r => {
            this.cateList = r.list;
        });
    },
    methods: {
        toProductAll() {
            this.$u.route({
                type: 'to',
                url: '/pages/productlist/productlist'
            });
        },
        toPorductArea(id) {
            this.$u.route({
                type: 'to',
                url: '/pages/productlist/productlist',
                params: {
                    area: Number(id)
                }
            });
        },
        toPorductCate(id) {
            this.$u.route({
                type: 'to',
                url: '/pages/productlist/productlist',
                params: {
                    cate: Number(id)
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.u-wrap {
    display: flex;
    flex-direction: column;
    background-color: #fafafa;
}


.u-card-wrap {
    background-color: $u-bg-color;
    padding: 1px;
}

.u-body-item {
    font-size: 32rpx;
    color: #333;
    padding: 20rpx 10rpx;
}

.u-body-item image {
    width: 120rpx;
    flex: 0 0 120rpx;
    height: 120rpx;
    border-radius: 8rpx;
    margin-right: 12rpx;
}
</style>
